import React, {Fragment} from 'react';
import { createModalContainer } from '@/components/changeModal';
import {Button, message, Form, Input, Row, Col} from 'antd';
import { connect } from 'dva';
import modalstyles from './modal.less';
import styles from './index.less';
import MyTag from './memberTagChcked';

const FormItem = Form.Item;
const Search = Input.Search;
// let selectTags = [];

@Form.create()
class AddTagComponent extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
        isFetching: false,
        ctagList: [],
        selectTags: []
      }
  }
  componentWillMount() {
    window.Isoption = false;
  }
  componentDidMount() {
    window.Isoption = true;
  }

//取消
handleCancel =() => {
  this.props.cancel();
}

componentDidMount() {
  this.requestTagList();
  this.requestAllTagList();
}

requestTagList = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'customerList/FindTagList',
      callback: {
        success: data => {
          this.setState({
              ctagList: data.Data
         });
        },
      },
    });
  };

  requestAllTagList = () => {
    const { dispatch, allTagList } = this.props;
    dispatch({
      type: 'customerList/FindAllTagList',
    });
  };


handleSubmit =(e) => {
    const { dispatch } = this.props;
    const {selectTags} = this.state;
    this.setState({
        isFetching: true
    })
    e.preventDefault();
    if(selectTags.length> 0) {
        dispatch({
            type:'customerList/AddMemberTags',
            payload: {
                MemberIds: [this.props.param.MemberId],
                TagIds: selectTags
            },
            callback: {
                success: res => {
                    if(res.Code ===0) {
                        message.success('添加成功');
                        this.setState({
                            isFetching: false
                        }, () => {
                            this.props.ok();
                        })
                    }
                },
                error: res => {
                    this.setState({
                        isFetching: false
                    });
                    message.error(res.Msg)
                }
            }
        })
    } else {
        this.setState({
            isFetching: false
        });
        message.error('请选择标签')
    }
}

 seachTag = (name, e)=> {
    e.preventDefault();
    const {allTagList} = this.props;
    let list = allTagList.filter(item => item.Name.indexOf(name) > -1);
    if(name) {
        this.setState({
          ctagList: list
      }, () => {
        this.forceUpdate();
      });
    } else {
      this.requestTagList();
    }
  };

 tagOnChange = (checked, value) => {
    const {selectTags} = this.state;
    if (checked) {
      selectTags.push(value);
    } else {
      if (selectTags.filter(item => item == value).length > 0) {
        let index = selectTags.findIndex(item => item == value);
        selectTags.splice(index, 1);
      }
    }
  };

    render() {
        return (
          <Form onSubmit={this.handleSubmit} style={{marginTop: 24}}>
           <Fragment>
                <Row className={styles.AddTag} style={{marginLeft: 24}}>
                    <Col span={9}>
                        <Search
                            placeholder="请输入标签名称"
                            onSearch={(value, e) => this.seachTag(value, e)}
                        />
                    </Col>
                </Row>
                <Row className={styles.TagList} style={{marginLeft: 24, marginRight: 24}}>
                    <Col>
                        {this.state.ctagList &&
                        this.state.ctagList.map((tag, index) => {
                            return (
                            <MyTag onchecked={this.tagOnChange} value={tag.Id} key={index}>
                                {tag.Name}
                            </MyTag>
                            );
                        })}
                    </Col>
                </Row>
            </Fragment>

            <FormItem className={modalstyles.footBtn}>
                <Button onClick={this.handleCancel} style={{marginRight: 16}}>
                    取消
                </Button>
                <Button
                    type="primary"
                    htmlType="submit"
                    loading={this.state.isFetching}
                >
                    确定
                </Button>
            </FormItem>
      </Form>
        )
    }
}

const AddTag = createModalContainer(
    connect(({customerList, global, loading}) => ({
        memberInfo: customerList.memberInfo,
        allTagList: customerList.allTagList,
    }))(AddTagComponent),
    true,
    true
);

export default AddTag;
